import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Dialog from '@mui/material/Dialog';
import Box from '@mui/material/Box';
import DialogActions from '@mui/material/DialogActions';
import DialogTitle from '@mui/material/DialogTitle';
import { updateJobStatus } from '../redux/actions'
import { GROUP_DELETED, GROUP_FIRST_ROUND, GROUP_NEW, GROUP_SECOND_ROUND, GROUP_SUBMIT } from '../contants.js'
import '../index.css'

function Toolbar(props) {
  const [showConfirm, setShowConfirm] = useState(false)
  const selectedRowKeys = useSelector(state => state.job.selectedRowKeys)
  const dispatch = useDispatch()

  const gotoNew = ()=>{
    dispatch(updateJobStatus({ids:selectedRowKeys, newStatus: GROUP_NEW}))
  }

  const gotoFirstRound = ()=>{
    dispatch(updateJobStatus({ids:selectedRowKeys, newStatus: GROUP_FIRST_ROUND}))
  }

  const gotoSecondRound = ()=>{
    dispatch(updateJobStatus({ids:selectedRowKeys, newStatus: GROUP_SECOND_ROUND}))
  }
  const gotoSubmit = ()=>{
    dispatch(updateJobStatus({ids:selectedRowKeys, newStatus: GROUP_SUBMIT}))
  }

  const onDelete = ()=>{
    dispatch(updateJobStatus({ids:selectedRowKeys, newStatus: GROUP_DELETED}))
  }

  const handleClose = () => {
    setShowConfirm(false)
  }

  const handleOk = () => {
    // delete
    setShowConfirm(false)
    onDelete({ hard: true })
  }

  return (
    <div>
      <Box sx={{
        textAlign: 'right',
        marginTop: '5px',
        marginBottom: '5px',
      }}>
        {!!selectedRowKeys.length && <span style={{paddingRight: 10}}>已选中{selectedRowKeys.length}条</span>}
        <ButtonGroup variant="outlined" aria-label="Basic button group">
        {
          props.gotoNewBtn && <Button
            onClick={gotoNew}>还原</Button>
        },
        {
          props.gotoFirstBtn && <Button
            onClick={gotoFirstRound}>通过</Button>
        }{
          props.gotoSecondBtn && <Button onClick={gotoSecondRound}>晋级</Button>
        }{
          props.gotoSubmit && <Button onClick={gotoSubmit}>已投递</Button>
        }{
          props.deleteBtn && <Button variant="contained" onClick={()=>{
            onDelete()
          }}>Remove</Button>
        }

          {/* <Button variant="contained" onClick={() => {
            setShowConfirm(true)
          }}>Delete</Button> */}
        </ButtonGroup>
          <Dialog
            open={showConfirm}
            onClose={handleClose}
          >
            <DialogTitle id="alert-dialog-title">
              {"确定删除这些数据吗？"}
            </DialogTitle>
            <DialogActions>
              <Button onClick={handleClose}>取消</Button>
              <Button onClick={handleOk} autoFocus>
                确定
              </Button>
            </DialogActions>
          </Dialog>            
      </Box>
    </div>)
  
}


export default Toolbar